<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!--让网页在移动设备上能够自适应屏幕宽度-->
    <title>WebRTC demo</title>
    <style>
    button {
        padding: 8px 16px;
    }

    pre {
        overflow-x: hidden;
        overflow-y: auto;
    }

    video {
        width: 100%;
    }

    .option {
        margin-bottom: 8px;
    }

    #media {
        max-width: 1280px;
    }
    </style>
</head>
<body>


<h2>Options</h2>
<div class="option">
    <label for="send-mode">发送模式：</label> <!--for来将这个显示“发送模式：”的label连接到下面id=send-mode的元素-->
    <select id="send-mode">
        <option value="echo">服务器回显</option>
        <option value="peer">点对点通信</option>
    </select>
</div>
<div class="option">
    <label for="user-name">昵称：</label>
    <input id="user-name" type="text" placeholder="输入你的昵称"> <!--输入id区域-->
</div>
<div class="option">
    <input id="use-datachannel" checked="checked" type="checkbox"/> <!--checked属性表示默认选中这个复选框-->
    <label for="use-datachannel">Use datachannel</label>
    <select id="datachannel-parameters">
        <option value='{"ordered": true}'>Ordered, reliable</option>
        <option value='{"ordered": false, "maxRetransmits": 0}'>Unordered, no retransmissions</option>
        <option value='{"ordered": false, "maxPacketLifetime": 500}'>Unordered, 500ms lifetime</option>
    </select>
</div>
<div class="option">
    <input id="use-audio" type="checkbox"/>
    <label for="use-audio">Use audio</label>
    <select id="audio-input">
        <option value="" selected>Default device</option><!--选择默认设备-->
    </select>
    <select id="audio-codec">
        <option value="default" selected>Default codecs</option>
        <option value="opus/48000/2">Opus</option>
        <option value="G722/8000">G722</option>
        <option value="PCMU/8000">PCMU</option>
        <option value="PCMA/8000">PCMA</option>
    </select>
</div>
<div class="option">
    <input id="use-video" type="checkbox"/>
    <label for="use-video">Use video</label>
    <select id="video-input">
        <option value="" selected>Default device</option>
    </select>
    <select id="video-resolution">
        <option value="" selected>Default resolution</option>
        <option value="320x240">320x240</option>
        <option value="640x480">640x480</option>
        <option value="960x540">960x540</option>
        <option value="1280x720">1280x720</option>
    </select>
    <select id="video-codec">
        <option value="default" selected>Default codecs</option>
        <option value="VP8/90000">VP8</option>
        <option value="H264/90000">H264</option>
    </select>
</div>
<div class="option">
    <input id="use-stun" type="checkbox"/>
    <label for="use-stun">Use STUN server</label>
</div>
<div class="option">
    <input id="use-turn" type="checkbox"/>
    <label for="use-turn">Use TURN server</label>
</div>

<button id="start" onclick="start()">Start</button>
<button id="stop" style="display: none" onclick="stop()">Stop</button>

<div id="user-list-area" style="display:none;">
    <h2>在线用户</h2>
    <ul id="user-list"></ul>    <!--无序列表，可在js中进行增加用户-->
</div>

<div id="main-content" style="display:none;">
    <h2>State</h2>
    <p>   <!-- p标签用于定义段落 -->
        ICE gathering state: <span id="ice-gathering-state"></span> <!--这是一个内联元素，带有唯一的id属性。它本身没有内容，通常用于通过JavaScript动态插入或更新内容。-->
    </p>
    <p>
        ICE connection state: <span id="ice-connection-state"></span>
    </p>
    <p>
        Signaling state: <span id="signaling-state"></span>
    </p>

    <div id="media" style="display: none">
        <h2>Media</h2>
        <audio id="audio" autoplay="true"></audio>
        <video id="video" autoplay="true" playsinline="true"></video>
    </div>


    <h2>Channel Log</h2>
    <pre id="data-channel" style="height: 200px;"></pre>

    <h2>Input</h2>
    <div>
        <input id="data-input" type="text" placeholder="Enter data to send" style="width:60%">
        <button onclick="sendCustomData()">Send Data</button>
    </div>
    <h3>Chat Data</h3>
    <pre id="chat-data" style="height: 300px;"></pre>

    <h2>SDP</h2>
    <h3>Offer</h3>
    <pre id="offer-sdp"></pre>
    <h3>Answer</h3>
    <pre id="answer-sdp"></pre>
</div>

<script src="client.js"></script>
<!-- 选择echo模式时，隐藏userId部分的内容 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const sendMode = document.getElementById('send-mode');
    const userNameDiv = document.querySelector('.option label[for="user-name"]').parentElement;

    function toggleUserName() {
        if (sendMode.value === 'echo') {
            userNameDiv.style.display = 'none';
        } else {
            userNameDiv.style.display = '';
        }
    }

    sendMode.addEventListener('change', toggleUserName);
    toggleUserName(); // 页面加载时也执行一次
});
</script>
</body>
</html>
